<template>
    <!-- 侧边栏 -->
    <v-navigation-drawer app>
        <v-list>
            <v-list-item v-for="contact in contacts" :key="contact.name" @click="selectContact(contact)">
                <v-list-item-title :class="{ 'selected': selectedItem === contact.name }">{{ contact.name
                    }}</v-list-item-title>
            </v-list-item>
        </v-list>
    </v-navigation-drawer>
    <RightChat :showCard="showCard" :avatar="contactAvatar" :cardTitle="cardTitle" :cardMessage="messages" @close-card="closeCard"></RightChat>
</template>
<script setup>
import { ref } from 'vue';
const contacts = [
    {
        name: '张三', id: 1, avatar: "http://106.14.223.232:9000/disk2/profile.jpg", messages: [
            { name: 'you', index: 29, text: "发送的消息", time: '2024-10-11 20:24:15', forward: 'left' },
            { name: 'you', index: 28, text: "发送的消息", time: '2024-10-12 20:24:15', forward: 'left' },
            { name: 'my', index: 27, text: "发送的消息",  time: '2024-10-13 20:24:15', forward: 'right' },
            { name: 'you', index: 26, text: "发送的消息",  time: '2024-10-14 20:24:15', forward: 'left' },
            { name: 'you', index: 25, text: "发送的消息", time: '2024-10-15 20:24:15', forward: 'left' },
            { name: 'you', index: 24, text: "发送的消息", time: '2024-10-16 20:24:15', forward: 'left' },
            { name: 'my', index: 23, text: "发送的消息",  time: '2024-10-17 20:24:15', forward: 'right' },
            { name: 'you', index: 22, text: "发送的消息", time: '2024-10-18 20:24:15', forward: 'left' },
            { name: 'you', index: 21, text: "发送的消息", time: '2024-10-19 20:24:15', forward: 'left' },
            { name: 'my', index: 20, text: "发送的消息",  time: '2024-10-20 20:24:15', forward: 'right' },
            { name: 'you', index: 19, text: "发送的消息",  time: '2024-10-21 20:24:15', forward: 'left' },
            { name: 'you', index: 18, text: "发送的消息", time: '2024-10-22 20:24:15', forward: 'left' },
            { name: 'you', index: 17, text: "发送的消息", time: '2024-10-23 20:24:15', forward: 'left' },
            { name: 'my', index: 16, text: "发送的消息",  time: '2024-10-24 10:24:15', forward: 'right' },
            { name: 'you', index: 15, text: "发送的消息", time: '2024-10-11 20:24:15', forward: 'left' },
            { name: 'you', index: 14, text: "发送的消息", time: '2024-10-12 20:24:15', forward: 'left' },
            { name: 'my', index: 13, text: "发送的消息",  time: '2024-10-13 20:24:15', forward: 'right' },
            { name: 'you', index: 12, text: "发送的消息",  time: '2024-10-14 20:24:15', forward: 'left' },
            { name: 'you', index: 11, text: "发送的消息", time: '2024-10-15 20:24:15', forward: 'left' },
            { name: 'you', index: 10, text: "发送的消息", time: '2024-10-16 20:24:15', forward: 'left' },
            { name: 'my', index: 9, text: "发送的消息",  time: '2024-10-17 20:24:15', forward: 'right' },
            { name: 'you', index: 8, text: "发送的消息", time: '2024-10-18 20:24:15', forward: 'left' },
            { name: 'you', index: 7, text: "发送的消息", time: '2024-10-19 20:24:15', forward: 'left' },
            { name: 'my', index: 6, text: "发送的消息",  time: '2024-10-20 20:24:15', forward: 'right' },
            { name: 'you', index: 5, text: "发送的消息",  time: '2024-10-21 20:24:15', forward: 'left' },
            { name: 'you', index: 4, text: "发送的消息", time: '2024-10-22 20:24:15', forward: 'left' },
            { name: 'you', index: 3, text: "发送的消息", time: '2024-10-23 20:24:15', forward: 'left' },
            { name: 'my', index: 2, text: "发送的消息",  time: '2024-10-24 10:24:15', forward: 'right' },
            { name: 'you', index: 1, text: "发送的消息",  time: '2024-10-24 20:24:15', forward: 'left' }
        ]
    },
    { name: '李四', id: 2 }
];
const selectedItem = ref(contacts[0]);
const cardTitle = ref(contacts[0].name);
// 是否显示卡片
const showCard = ref(false);
const messages = ref(null);
const contactAvatar = ref(null);
function selectContact(value) {
    selectedItem.value = value.name;
    cardTitle.value = value.name
    messages.value = value.messages
    contactAvatar.value = value.avatar
    console.log(selectedItem.value)
    showCard.value = true;
}

// 关闭卡片
function closeCard() {
    showCard.value = false;
}
</script>
<style scoped>
.selected {
    background-color: #e0e0e0;
    /* 你可以选择任意颜色 */
    font-weight: bold;
    /* 可以改变字体粗细 */
}
</style>